<template>
	<view class="lease_housebn_step">
		<view class="step_city">
			<text>城市</text>
			<text>(可在首页切换城市)</text>
			<text>
				{{cityinfo.title}}
			</text>
		</view>
		<!-- 选项 -->
		<view class="option_list">
			<view class="option_items">
				<text class="op_ite_fl">小区</text>
				<picker @change="bindPickerChange6" :value="communityindex" :range="communityList" range-key="community_name">
					<view class="op_ite_fr" v-if="communityindex==-1&&communityList.length!=0">
						<text>请选择</text>
						<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</view>
					<view class="op_ite_fr" v-if="communityindex==-1&&communityList.length==0">
						<text>暂无可选小区</text>
						<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</view>
					<view class="op_ite_fr" v-if="communityindex!=-1">
						<text>{{communityList[communityindex].community_name}}</text>
					</view>
				</picker>
			</view>	
			<view class="option_items" >
				<text class="op_ite_fl">户型</text>
				<picker @change="bindPickerChange" :value="house_typeindex" :range="optiondata.house_type.values">
						<view class="op_ite_fr" v-if="house_typeindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="house_typeindex!=-1">
							<text>{{optiondata.house_type.values[house_typeindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">面积(㎡)</text>
				<view class="op_ite_fr">
					<input type="number" v-model="area"  placeholder="请输入" />
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">楼层</text>
				<view class="op_ite_fr">
					<input type="number" v-model="nowlevel" placeholder="请输入楼层"/>
					<text>/</text>
					<input type="number"  v-model="maxlevel" value="" style="text-align: left;" placeholder="请输入最高楼层"/>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">朝向</text>
				<picker @change="bindPickerChange2" :value="directionindex" :range="optiondata.direction.values">
						<view class="op_ite_fr" v-if="directionindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="directionindex!=-1">
							<text>{{optiondata.direction.values[directionindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">装修</text>
				<picker @change="bindPickerChange3" :value="renovationindex" :range="optiondata.renovation.values">
						<view class="op_ite_fr" v-if="renovationindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="renovationindex!=-1">
							<text>{{optiondata.renovation.values[renovationindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">房屋类型</text>
				<picker @change="bindPickerChange4" :value="house_type1index" :range="optiondata.house_type1.values">
						<view class="op_ite_fr" v-if="house_type1index==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="house_type1index!=-1">
							<text>{{optiondata.house_type1.values[house_type1index]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">联系人</text>
				<view class="op_ite_fr">
					<input type="text" v-model="username"  placeholder="请输入联系人"/>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">称呼</text>
				<picker @change="bindPickerChange5" :value="sexindex" :range="sexarray">
						<view class="op_ite_fr" v-if="sexindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="sexindex!=-1">
							<text>{{sexarray[sexindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">电话<text style="color: #2BB2FF;
				font-size: 22rpx;">(已开启徇私保护)</text></text>
				<view class="op_ite_fr">
					<input type="number" v-model="phone"  placeholder="请输入电话"/>
				</view>
			</view>
	<!-- 		<view class="step_city" style="padding: 0;">
				<text>电话</text>
				<text>(已开启徇私保护)</text>
				<text>
					15222222222
				</text>
			</view> -->
		</view>
		
		<!-- 发布 -->
		<view class="lease_details_foo" @click="commit">
			<view class="foo_btn">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {   
			return {
				detailsHouse:'',
				id:'',
				previousinfo:'',
				sexarray:['先生','女士'],
				house_typeindex:-1, //户型
				directionindex:-1,  //朝向
				renovationindex:-1, //装修
				house_type1index:-1,//房屋类型
				communityindex:-1,
				sexindex:-1,
				addressobj:{
					name:'请选择',
					address:'',
					latitude:'',
					longitude:''
				},
				optiondata:'',
				area:null, //房屋面积
				nowlevel:null,  //当前楼层
				maxlevel:null,  //最高楼层
				username:'',    //联系人
				phone:'',      //电话
				cityinfo:'',
				communityList:''  //小区列表
			};
		},
		onShow() {
			this.getcheckdata()
			
			var  cityinfo=uni.getStorageSync('cityinfo')
			if(cityinfo){
				this.cityinfo=cityinfo
			}
			this.getAllCommunity(this.cityinfo.data)
			console.log(this.id)
			if(this.id&&this.id!='undefined'){
				this.getLeasedetails(this.id)
			}  
		},
		onLoad(option) {
			var that=this
			this.id=option.id
			const eventChannel = this.getOpenerEventChannel()
			 eventChannel.on('acceptDataFromOpenerPage', function(data) {
			    console.log(data)
				that.previousinfo=data.data
			  })
			
		},
		methods:{
			// 获取房屋详情
			getLeasedetails(id){
				this.$http.get('Mini/circle/house/lease/' + id).then(res => { 
					if(res.code == 200){
						if(res.data.images.length>0){
							res.data.flowarray=res.data.storey.split('/');
						}
						this.detailsHouse = res.data
						//选择小区
						var communitycount=0
						for(var i=0;i<this.communityList.length;i++){
							if(this.communityList[i].community_id==this.detailsHouse.community.community_id&&this.communityList[i].community_name==this.detailsHouse.community.community_name){
								this.communityindex=i
								communitycount++
						}
						}
						if(communitycount==0){
							this.communityList.unshift(this.detailsHouse.community)
							this.communityindex=0
						}
						//户型
						var house_typecount=0
						for(var i=0;i<this.optiondata.house_type.values.length;i++){
							if(this.optiondata.house_type.values[i]==this.detailsHouse.house_type){
								this.house_typeindex=i
								house_typecount++
							}
						}
						if(house_typecount==0){
							this.optiondata.house_type.values.unshift(this.detailsHouse.house_type)
							this.house_typeindex=0
						}
						this.area=this.detailsHouse.area
						this.nowlevel=this.detailsHouse.flowarray[0]
						this.maxlevel=this.detailsHouse.flowarray[1]
						//朝向
						var directioncount=0
						for(var i=0;i<this.optiondata.direction.values.length;i++){
							if(this.optiondata.direction.values[i]==this.detailsHouse.direction){
								this.directionindex=i
								directioncount++
							}
						}
						if(directioncount==0){
							this.optiondata.direction.values.unshift(this.detailsHouse.direction)
							this.directionindex=0
						}
						//装修
						var renovationcount=0
						for(var i=0;i<this.optiondata.renovation.values.length;i++){
							if(this.optiondata.renovation.values[i]==this.detailsHouse.renovation){
								this.renovationindex=i
								renovationcount++
							}
						}
						if(renovationcount==0){
							this.optiondata.renovation.values.unshift(this.detailsHouse.renovation)
							this.renovationindex=0
						}
						//房屋类型 house_type1
						var house_type1count=0
						for(var i=0;i<this.optiondata.house_type1.values.length;i++){
							if(this.optiondata.house_type1.values[i]==this.detailsHouse.house_type1){
								this.house_type1index=i
								house_type1count++
							}
						}
						if(house_type1count==0){
							this.optiondata.house_type1.values.unshift(this.detailsHouse.house_type1)
							this.house_type1index=0
						}
						//称呼 sexindex
						for(var i=0;i<this.sexarray.length;i++){
							if(this.detailsHouse.call==this.sexarray[i]){
								this.sexindex=i
							}
						}
						
						this.username=this.detailsHouse.username
						this.phone=this.detailsHouse.phone
					}
				})
			},
			//获取小区
				getAllCommunity(cityInfo){
					let {province_id,city_id,area_id} = cityInfo 
					this.$http.get('wechat/allCommunity/' + province_id + '/' + city_id + '/' + area_id).then(res => { 
						if(res.code == 200){ 
							this.communityList = res.data
							console.log(res.data)
						}
					})
				},
			commit(){
				var that=this
				if(this.communityindex==-1){
					uni.showToast({
						title:'请选择小区',
						icon:'none'
					})
					return
				}
				if(this.house_typeindex==-1){
					uni.showToast({
						title:'请选择户型',
						icon:'none'
					})
					return
				}
				if(!this.area){
					uni.showToast({
						title:'请输入面积',
						icon:'none'
					})
					return
				}
				if(!this.nowlevel){
					uni.showToast({
						title:'请输入当前楼层',
						icon:'none'
					})
					return
				}
				if(!this.maxlevel){
					uni.showToast({
						title:'请输入最高楼层',
						icon:'none'
					})
					return
				}
				if(this.maxlevel<this.nowlevel){
					uni.showToast({
						title:'当前楼层不能大于最高楼层',
						icon:'none'
					})
					return
				}
				if(this.directionindex==-1){
					uni.showToast({
						title:'请选择朝向',
						icon:'none'
					})
					return
				}
				if(this.renovationindex==-1){
					uni.showToast({
						title:'请选择装修',
						icon:'none'
					})
					return
				}
				if(this.house_type1index==-1){
					uni.showToast({
						title:'请选择房屋类型',
						icon:'none'
					})
					return
				}
				if(this.username.length==0){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					return
				}
				if(this.sexindex==-1){
					uni.showToast({
						title:'请选择称呼',
						icon:'none'
					})
					return
				}
				if(this.phone.length==0){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				var data=JSON.parse(JSON.stringify(that.previousinfo))
				data.community_id=this.communityList[this.communityindex].community_id
				data.house_type=this.optiondata.house_type.values[this.house_typeindex]
				data.area=this.area
				data.storey=this.nowlevel+'/'+this.maxlevel
				data.direction=this.optiondata.direction.values[this.directionindex]
				data.renovation=this.optiondata.renovation.values[this.renovationindex]
				data.house_type1=this.optiondata.house_type1.values[this.house_type1index]
				data.username=this.username
				data.call=this.sexarray[this.sexindex]
				data.phone=this.phone
				console.log(data)
				console.log(data.more_option)
				data.more_option=JSON.stringify(data.more_option)
				if(this.id&&this.id!='undefined'){
					this.$mrequest2({
						url:'Mini/circle/house/lease/'+this.id,
						method:'PUT',
						data,
					}
					).then((res)=>{
						console.log(res)
						if(res.code==200){
							uni.showToast({
								title:'发布成功',
								success: () => {
									uni.removeStorageSync('labelData')
									uni.reLaunch({
										url:'/neighbor/neuser/index'
									})
								}
							})
						}
						// console.log(res.data.images)
						// this.pageinfo=res.data
						
					})
				}else{
					this.$mrequest2({
						url:'Mini/circle/house/lease',
						data,
					}
					).then((res)=>{
						console.log(res)
						if(res.code==200){
							uni.showToast({
								title:'发布成功',
								success: () => {
									uni.removeStorageSync('labelData')
									uni.reLaunch({
										url:'/neighbor/house/index'
									})
								}
							})
						}
						// console.log(res.data.images)
						// this.pageinfo=res.data
						
					})
				}

			},
			//选择位置
			looklocation(){
				var that=this
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.addressobj.name=res.name
						that.addressobj.address=res.address
						that.addressobj.latitude=res.latitude
						that.addressobj.longitude=res.longitude
					}
				});
			},
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.house_typeindex = e.target.value
			  },
			  bindPickerChange2: function(e) {
			             console.log('picker发送选择改变，携带值为', e.target.value)
			             this.directionindex = e.target.value
			   },
			   bindPickerChange3: function(e) {
			              console.log('picker发送选择改变，携带值为', e.target.value)
			              this.renovationindex = e.target.value
			    },
				bindPickerChange4: function(e) {
				           console.log('picker发送选择改变，携带值为', e.target.value)
				           this.house_type1index = e.target.value
				 },
				 bindPickerChange5: function(e) {
				            console.log('picker发送选择改变，携带值为', e.target.value)
				            this.sexindex = e.target.value
				  },
				bindPickerChange6: function(e) {
				           console.log('picker发送选择改变，携带值为', e.target.value)
				           this.communityindex = e.target.value
				 },  
			  getcheckdata(){
				this.$http.get('Mini/circle/house/getOption').then(res => {
					console.log(res)
					this.optiondata=res.data
				})
			  },
		}
	}
</script>

<style lang="scss">
.lease_housebn_step{
	height: 100vh;
	font-size: 30rpx;
	background-color: #f7f8f9;
	.step_city{
		margin-bottom: 10rpx;
		padding: 0 33rpx;
		height: 109rpx;
		line-height: 109rpx; 
		background-color: #fff;
		& text:nth-child(2){
			margin-left: 10rpx;
			color: #2BB2FF;
			font-size: 24rpx;
		}
		& text:nth-child(3){
			float: right;
		}
	}
	.option_list{ 
		padding: 0 30rpx 30rpx 30rpx;
		background-color: #fff;
		.option_items{
			display: flex;
			justify-content: space-between;
			height: 119rpx;
			line-height: 119rpx;
			border-bottom: 1rpx solid #a5a5a5;
			.op_ite_fr{
				display: flex;
				align-items: center;
				&>input{
					font-size: 28rpx;
					text-align: right;
					width: 200rpx;
				}
				.op_ite_fr_img{
					margin: auto 0;
					margin-left: 10rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	.lease_details_foo{
		position: relative;
		height: 160rpx;
		background-color: #f7f8f9;
		.foo_btn{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 670rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: #FF7430;
			border-radius: 48rpx; 
		}
	}
}
</style>
